<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!-- role main -->
<div id="role-layout-main" class="easyui-layout" style="width:100%;height:100%;">   
    <div data-options="region:'north'" style="height:50px; line-height: 48px;">
    	<!-- 条件搜索栏 -->
		<form id="role-form-search" method="post">
			<label for="name">角色名称:</label> <input class="easyui-validatebox" type="text" name="name" />
			<input type="button" class="icon-search" style="width:50px;" onclick="ROLE.search('#role-form-search input[name=name]')"/>
		</form>
	</div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
    	<table id="role-datagrid-list" class="easyui-datagrid" 
    	data-options="url:'/role/list',fitColumns:true,singleSelect:false,pagination:true,
    	pageSize:10,
    	pageList:[10,20,30],
    	toolbar:[{
    	text:'添加',
		iconCls: 'icon-add',
		handler: ROLE.openAddWindow
	},'-',{
		text:'修改',
		iconCls: 'icon-edit',
		handler: ROLE.openUpdateWindow
	},'-',
	{
		text:'删除',
		iconCls: 'icon-no',
		handler: ROLE.remove
	}]">   
			<thead>
				<tr>
					<th data-options="field:'checked',width:100,checkbox:true"></th>
					<th data-options="field:'id',width:100">编码</th>
					<th data-options="field:'name',width:100">名称</th>
					<th data-options="field:'status',width:100,formatter: function(value,row,index){return ROLE.format_status(value,row,index)}">状态</th>
					<th data-options="field:'creator',width:100">创建者</th>
					<th data-options="field:'create_time',width:100,align:'center',
					formatter:  function(value,row,index){
							return YHD.formatDate(value,'yyyy-MM-dd hh:mm:ss');
					}">创建时间</th>
					<th data-options="field:'update_time',width:100,align:'center',
					formatter:  function(value,row,index){
							return YHD.formatDate(value,'yyyy-MM-dd hh:mm:ss');
					}">修改时间</th>
				</tr>
			</thead>
		</table>
		  
    </div>   
</div>



<script type="text/javascript" >
	
	var ROLE={};
	//格式化状态方法
	ROLE.format_status=function(value,row,index){
		if (value==1){
			var ss = '<span style="color:green;margin-right:50px">启用</span>';
			var btn = '<a href="#" class="easyui-linkbutton" onclick="javascript:ROLE.update_status(2,'+row.id+')">禁用</a>';
			return ss+btn;
		} else {
			var ss = '<span style="color:red;margin-right:50px">禁用</span>';
			var btn = '<a href="#" class="easyui-linkbutton" onclick="javascript:ROLE.update_status(1,'+row.id+')">启用</a>';
			return ss+btn;
		}
	};
	
	//修改状态
	ROLE.update_status=function(value,id){
		//修改状态
		$.ajax({
				type : "post",
				url : "/role/update",
				data : "status=" + value + "&id=" + id,
				dataType : "json",
				success : function(msg) {
					if (msg.status == 200) {
						//刷新列表
						$('#role-datagrid-list').datagrid('reload');
					}
				}
		});
	}

	//搜索
	ROLE.search = function(selector) {
		var name = $.trim($(selector).val());
		if (name == '') {
			//传空参数，清除原来的参数
			$('#role-datagrid-list').datagrid('load', {});
		} else {
			$('#role-datagrid-list').datagrid('load', {
				"name" : name
			});
		}
	};

	//验证方法,此处适用修改和添加验证，方法参数是各自表单的id,如果是修改
	ROLE.check = function(formId, orignal_name) {
		//验证表单元素
		var $input_role_name = $('#' + formId + ' input[name=name]');
		var role_name = $.trim($input_role_name.val());
		if (role_name == '') {
			$input_role_name.focus();
			//显示错误信息
			$('#' + formId + ' #role-name-tip').html(
					'<span style="color:red;">角色名称不能为空</span>');
			return false;
		} else {
			//如果是修改操作，当修改后的名称和修改前相同时，不做唯一性验证
			if (formId == 'role-form-update') {
				//判断是否相同
				if (role_name == orignal_name) {
					//给个提示，名称没有修改
					$('#' + formId + ' #role-name-tip').html(
							'<span style="color:blue;">名称没有修改</span>');
					return false;
				}
			}
			$('#' + formId + ' #role-name-tip').html('');
			var flag = false;
			//进行唯一性验证，使用ajax查询数据库
			$.ajax({
				type : "get",
				url : "/role/check/name",
				data : "name=" + role_name,
				dataType : "json",
				async : false,
				success : function(msg) {
					//如果成功
					if (msg.status == 200 && msg.data) {
						$('#' + formId + ' #role-name-tip').html(
								'<span style="color:red;">该角色名称已被使用</span>');
					} else {
						$('#' + formId + ' #role-name-tip').html(
								'<span style="color:green;">该角色名称可以使用</span>');
						flag = true;
					}
				}
			});
			return flag;
		}
	};

	//打开添加角色窗口
	ROLE.openAddWindow = function() {
		$('<div id="role-dialog-add"></div>').dialog({
			title : '添加角色',
			width : 300,
			height : 150,
			modal : true,
			collapsible : false,
			minimizable : false,
			maximizable : false,
			closable : false,
			href : "/role/add",
			buttons : [ {
				text : '添  加',
				iconCls : 'icon-add',
				handler : function() {
					$('#role-form-add').form('submit', {
						url : '/role/add',
						onSubmit : function() {
							return ROLE.check('role-form-add');
						},
						success : function(msg) {
							console.info('add role');
							msg = eval('(' + msg + ')');
							//添加角色后，返回结果
							if (msg.status == 200) {
								console.info('add role');
								$('#role-dialog-add').dialog('destroy');
								//弹出成功提示框
								$.messager.alert('操作提示', '添加成功！', 'info');
								//清空
								ROLE.clearAddForm();
								//刷新列表
								$('#role-datagrid-list').datagrid('reload');
							}
						}
					});
				}
			}, {
				text : '关  闭',
				iconCls : 'icon-cancel',
				handler : function() {
					console.info('debug destroy');
					$('#role-dialog-add').dialog('destroy');
				}
			} ]
		});
	};

	//清空表单元素
	ROLE.clearAddForm = function() {
		$('#role-form-add input').val('');
		$('#role-form-add #role-name-tip').html('');
	}

	//打开修改角色窗口
	ROLE.openUpdateWindow = function() {
		//判断是否选择了记录
		if ($('#role-datagrid-list').datagrid('getSelected') == null) {
			//给出一个警告
			$.messager.alert('提示', '请选择一条记录！', 'warning');
		} else {
			//根据所选择的行，得到id去查询这条记录的信息
			var row = $('#role-datagrid-list').datagrid('getSelected');

			$('<div id="role-dialog-update"></div>')
					.dialog(
							{
								title : '修改角色',
								width : 300,
								height : 150,
								modal : true,
								collapsible : false,
								minimizable : false,
								maximizable : false,
								closable : false,
								href : "/role/update/" + row.id,
								buttons : [
										{
											text : '修   改',
											iconCls : 'icon-edit',
											handler : function() {
												$('#role-form-update')
														.form(
																'submit',
																{
																	url : '/role/update/do',
																	success : function(
																			msg) {
																		msg = eval('('
																				+ msg
																				+ ')');
																		//添加角色后，返回结果
																		if (msg.status == 200) {
																			//弹出成功提示框
																			$.messager
																					.alert(
																							'操作提示',
																							'修改成功！',
																							'info');
																			//关闭窗口
																			$(
																					'#role-dialog-update')
																					.dialog(
																							'destroy');
																			//刷新列表
																			$(
																					'#role-datagrid-list')
																					.datagrid(
																							'reload');
																		}
																	}
																});
											}
										},
										{
											text : '关  闭',
											iconCls : 'icon-cancel',
											handler : function() {
												$('#role-dialog-update')
														.dialog('destroy');
											}
										} ]
							});
		}
	};

	//删除
	ROLE.remove = function() {
		//判断是否选择了记录
		var rows = $('#role-datagrid-list').datagrid('getSelections');
		if (rows.length == 0) {
			//给出一个警告
			$.messager.alert('提示', '请选择要删除的记录！', 'warning');
		} else {

			var names = '';
			for (i in rows) {
				names += "【" + rows[i].name + "】,";
				if (i > 1) {
					names += "......";
					break;
				}
			}
			//删除确认
			$.messager.confirm('删除确认', '您确认要删除这些' + names + '角色吗？',
					function(r) {
						if (r) {
							//根据所选择的行，得到ids去删除记录 ids[0]=1&ids[1]
							var ids = '';
							for (i in rows) {
								ids += rows[i].id + ",";
							}
							//批量删除
							$.ajax({
								type : "POST",
								url : "/role/delete",
								data : "ids=" + ids,
								dataType : "json",
								success : function(msg) {
									if (msg.status == 200) {
										//弹出成功提示框
										$.messager.alert('操作提示', '删除成功！',
												'info');
										//刷新列表
										$('#role-datagrid-list').datagrid(
												'reload');
									}
								}
							});
						}
					});
		}
	}
</script>